<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>酒店</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #f5f5f5;
            color: #333;
        }

        .header {
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            height: 60px;
        }



        .logo {
            color: #287dfa;
            font-size: 20px;
            font-weight: bold;
        }

        .user-actions {
            display: flex;
            gap: 20px;
        }

        .user-actions a {
            color: #666;
            text-decoration: none;
        }

        .main-content {
            margin-top: 60px;
            padding: 20px;
            max-width: 1200px;
            margin: 60px auto 0;
        }

        .breadcrumb {
            padding: 20px 0;
            color: #666;
            font-size: 14px;
        }

        .breadcrumb a {
            color: #287dfa;
            text-decoration: none;
        }

        .date-picker {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            border: 1px solid #e8e8e8;
        }

        .date-header {
            display: flex;
            justify-content: space-between;
            padding: 0 100px 10px 20px;
        }

        .date-label {
            color: #666;
            font-size: 14px;
        }

        .date-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        .date-block {
            flex: 1;
            cursor: pointer;
            padding: 10px 20px;
            text-align: center;
            min-width: 120px;
        }

        .date-value {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .week-value {
            font-size: 14px;
            color: #666;
            margin-top: 4px;
        }

        .nights {
            padding: 0 20px;
            color: #40b964;
            position: relative;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 80px;
        }

        .nights::before,
        .nights::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 40px;
            height: 1px;
            background: #e8e8e8;
            transform: translateY(-50%);
        }

        .nights::before {
            right: 100%;
        }

        .nights::after {
            left: 100%;
        }

        #datePickerDialog {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 720px;
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1001;
            display: none;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .month-display {
            display: flex;
            gap: 200px;
            font-size: 16px;
            font-weight: bold;
        }

        .prev-month,
        .next-month {
            border: none;
            background: none;
            font-size: 20px;
            cursor: pointer;
            color: #666;
        }

        .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .weekend {
            color: #87c38f;
        }

        .calendar-footer {
            margin-top: 20px;
            text-align: center;
            border-top: 1px solid #e8e8e8;
            padding-top: 15px;
        }

        .selected-dates {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
        }

        .hint {
            font-size: 12px;
            color: #999;
        }

        .dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        /* 日期选择器自定义样式 */
        .ui-datepicker {
            width: 100% !important;
            border: none !important;
            padding: 0 !important;
        }

        .ui-datepicker td {
            padding: 4px;
            position: relative;
        }

        .ui-datepicker td a {
            text-align: center !important;
            border-radius: 4px !important;
            padding: 8px !important;
            height: 40px;
            line-height: 24px;
        }

        .ui-datepicker td.selected-start a,
        .ui-datepicker td.selected-end a {
            background: #40b964 !important;
            color: white !important;
        }

        .ui-datepicker td.selected-range {
            background: #e6f7eb;
        }

        .ui-datepicker td.ui-datepicker-today a {
            background: #e6f7eb !important;
            color: #40b964 !important;
        }

        .ui-datepicker td.disabled {
            opacity: 0.5;
        }

        .ui-datepicker td.disabled span,
        .ui-datepicker td.disabled a {
            color: #ccc !important;
            cursor: not-allowed;
        }

        .ui-datepicker-header {
            display: none;
        }

        .ui-datepicker th {
            color: #87c38f;
            font-weight: normal;
            padding: 10px 0;
        }

        .ui-state-default {
            border: none !important;
            background: transparent !important;
            text-align: center !important;
        }

        .ui-state-hover {
            background: #e6f7eb !important;
            color: #40b964 !important;
        }

        /* 酒店信息样式 */
        .hotel-info {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
        }

        .hotel-title h1 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .comfort-tag {
            font-size: 14px;
            color: #666;
            font-weight: normal;
        }

        .favorite-btn {
            font-size: 24px;
            color: #666;
            cursor: pointer;
            margin-left: auto;
        }

        .hotel-address {
            color: #666;
            font-size: 14px;
            margin-bottom: 20px;
        }

        .map-link {
            color: #287dfa;
            text-decoration: none;
            margin-left: 10px;
        }

        .image-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 10px;
            margin-bottom: 20px;
        }

        .main-image {
            position: relative;
            height: 400px;
        }

        .sub-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .sub-image {
            position: relative;
            height: 195px;
        }

        .image-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }

        .score {
            position: absolute;
            left: 20px;
            bottom: 20px;
            color: #fff;
            font-size: 32px;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .score span {
            font-size: 16px;
            margin-left: 5px;
        }

        .view-all {
            position: absolute;
            right: 10px;
            bottom: 10px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
        }

        .facilities {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 20px;
            padding: 20px 0;
            border-top: 1px solid #e8e8e8;
        }

        .facility-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
        }

        .facility-icon {
            font-size: 20px;
            color: #287dfa;
        }
        .djyd{
            width: 200px;
            height: 50px;
            background-color: green;
            border-radius: 10px;
            margin: auto;
        }
        .yd{
            font-weight: bold;
            color: white;
            font-size: 30px;
            text-decoration: none;
            text-align: center;
            line-height: 50px;
            margin-left: 40px;
        }
        #yc{
                display: none;
        }
        #ws{
            display: none;
        }
        ul li {
            list-style: none;
            display: inline;
        }

        img {
            vertical-align: middle;
        }

        #navbar-left {
            width: 100%;
            height: 30px;
            background-color: lightgrey;
            line-height: 30px;

        }

        #navbar-left ul li span {
            font-size: 12px;
            color: #999;
            margin-left: 30px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        nav {
            position: absolute;
            left: 900px;
            top: -10px;
            padding: 0 16px;
        }

        .nav-list {
            display: flex;
            list-style: none;
            height: 48px;
            align-items: center;
        }

        .nav-item {
            position: relative;
        }

        .nav-link {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            text-decoration: none;
            font-size: 12px;
            color: #999;
            cursor: pointer;
        }


        .dropdown-icon {
            width: 12px;
            height: 12px;
            margin-left: 4px;
            transform: rotate(0deg);
            transition: transform 0.2s;
        }

        .dropdown-icon.active {
            transform: rotate(180deg);
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: whitesmoke;
            width: 100px;
            display: none;
            opacity: 0;
            transition: opacity 0.2s;
            margin-left: 15px;
        }

        .dropdown-menu.show {
            display: block;
            opacity: 1;
        }

        .dropdown-item {
            display: block;
            text-decoration: none;
            color: #666;
            font-size: 12px;
            margin-top: 10px;
            text-indent: 30px;

        }

        .dropdown-item:hover {
            color: red;
        }

        #bog-box-top {
            align-items: center;
        }


        <%--loger地名部分--%>
        .city-selector {
            position: relative;
            display: inline-block;
        }

        .selected-city {
            margin-left: 20px;
            line-height: 40px;
            height: 40px;
            font-size: 16px;
            color: #666666;
        }

        .city-trigger {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 12px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            background: none;
        }

        .city-trigger:hover {
            color: #00b96b;
        }

        .arrow {
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid currentColor;
            transition: transform 0.2s;
        }

        .arrow.down {
            transform: rotate(180deg);
        }

        .dropdown {
            display: none;
            position: absolute;
            top: 50px;
            left: 22px;
            width: 600px;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            padding: 16px;
            z-index: 1000;

        }

        .tabs {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }

        .tab {
            padding: 4px 8px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            background: none;
            color: #666;
        }

        .tab.active {
            color: #00b96b;
            border-bottom: 2px solid #00b96b;
        }

        .cities-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 12px;
        }

        .city-button {
            padding: 8px;
            font-size: 14px;
            border: none;
            background: none;
            cursor: pointer;
            border-radius: 4px;
        }

        .city-button:hover {
            color: red;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .contact-wrapper {
            position: absolute;
            left: 1300px;
            top: 65px;
            z-index: 1000;
        }


        .contact-icon i {
            color: white;
            font-size: 24px;
        }

        .contact-info {
            position: absolute;
            left: 0;
            top: 60px;
            width: 200px;
            background: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: none;
        }

        .contact-info h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
            color: #333;
        }

        .qr-code {
            width: 150px;
            height: 150px;
            margin: 10px auto;
            display: block;
        }

        .phone-numbers {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #eee;
        }

        .phone-number {
            margin: 5px 0;
            color: #666;
            font-size: 14px;
        }


        #span-kefu {
            font-size: 12px;
            display: inline-block;
            margin-left: 10px;
            color: #666666;
        }

        #span-ipone {
            color: #666666;
        }

        /*头部导航栏*/
        #GYH-nav {
            background-color: #00c250;
            width: 100%;
            padding: 0;
            margin: 0;
            margin-top: 20px;
        }

        .GYH-nav-container {


            display: flex;
            align-items: center;

        }

        .GYH-nav-list {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .GYH-nav-item {
            position: relative;
            margin-left: 6px;
        }

        .GYH-nav-link {
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            display: block;
            font-size: 14px;
            position: relative;

        }

        .GYH-nav-link:after {
            content: "▾";
            margin-left: 5px;
            font-size: 12px;
            opacity: 0.8;
        }

        .GYH-nav-item:hover .GYH-nav-link {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .GYH-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            min-width: 150px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            display: none;
            z-index: 1000;
        }

        .GYH-dropdown-item {
            padding: 10px 15px;
            color: #333;
            text-decoration: none;
            display: block;
            border-bottom: 1px solid #eee;
        }

        .GYH-dropdown-item:hover {
            background-color: #f5f5f5;
        }

        /*底部*/
        .service-highlights {
            display: flex;
            justify-content: space-around;
            padding: 20px 0;
            background: #fff;
            border-bottom: 1px solid #eee;
        }

        .highlight-item {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #666;
        }

        .site-footer {
            background: #333;
            color: #fff;
            padding: 40px 0;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            padding: 0 20px;
        }

        .footer-section h3 {
            font-size: 16px;
            margin-bottom: 20px;
            color: #fff;
        }

        .footer-section ul {
            list-style: none;
            padding: 0;
        }

        .footer-section{
            margin-left: -50px;
        }

        .footer-section ul li {
            margin-bottom: 10px;
            display: block;
        }

        .footer-link {
            color: #999;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-link:hover {
            color: #fff;
        }

        .qr-code {
            text-align: center;
        }

        .qr-code img {
            width: 120px;
            height: 120px;
            margin-bottom: 10px;
        }

        .popular-links {
            max-width: 1200px;
            margin: 20px auto 0;
            padding: 20px;
            border-top: 1px solid #444;
        }

        .links-section {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            color: #999;
        }

        .links-section a {
            color: #999;
            text-decoration: none;
        }

        .links-section a:hover {
            color: #fff;
        }



        #footer-section{
            position: absolute;
            left: 1400px;

        }

        #footer-section h3{
            margin-left: 12px;
        }


        #foot-bottom a{
            text-decoration: none;
            color: grey;
        }

        #foot-bottom p{
            color: grey;
        }

        #login-text-index{
            text-decoration: none;
            color: #999999;
        }

        #zhuce a{
            text-decoration: none;
            color: #999999;
        }

        .djyd{
            display: inline-block;
          margin-left: 30%;
        }
    </style>
</head>
<body>
<div id="bog-box-top">
    <div id="navbar-left">
        <ul>
            <li><span><a id="login-text-index" href="/login.jsp">您好，请登录</a><span id="tuichu">退出</span></span></li>
            <li><span id="zhuce"><a href="/register.jsp">注册</a></span></li>
            <li><img src="img/pc_index_gister.gif"></li>
        </ul>


    </div>


    <nav>
        <ul class="nav-list">
            <li class="nav-item">
                <a class="nav-link">
                    Language
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item"><img
                            src="img/rBLkCVvWbqmAJWxmAAABQaM8azg489.png">English</a>
                    <a href="#" class="dropdown-item"><img src="img/rBLkCVvS7pSAa_ssAAAA82XoyWY361.png">中文</a>
                </div>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">我的订单</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="My_fellow_traveler.jsp">
                    我的同程
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">我的订单</a>
                    <a href="#" class="dropdown-item">我的信息</a>
                    <a href="#" class="dropdown-item">我的收藏</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    客服服务
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">帮助中心</a>
                    <a href="#" class="dropdown-item">在线客服</a>
                    <a href="#" class="dropdown-item">人工申诉</a>
                    <a href="#" class="dropdown-item">抱团定制</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    合作中心
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">网站加盟</a>
                    <a href="#" class="dropdown-item">合作加盟</a>
                    <a href="#" class="dropdown-item">门票合作</a>
                    <a href="#" class="dropdown-item">商旅合作</a>
                </div>
            </li>

            <li class="nav-item">
                <a id="my-admin" href="backStageManagement.jsp" class="nav-link">我的后台</a>
            </li>
        </ul>
    </nav>

</div>

<div>
    <img src="img/PS2lfS0492.jpg">
</div>


<%--首页导航栏--%>
<div id="GYH-nav">

    <div class="GYH-nav-container">
        <ul class="GYH-nav-list">
            <li class="GYH-nav-item">
                <a href="/index.jsp" class="GYH-nav-link">首页</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/jd-index.jsp" class="GYH-nav-link">酒店</a>
                <div class="GYH-dropdown">
                    <a href="jd-index.jsp   " class="GYH-dropdown-item">国内酒店</a>
                </div>
            </li>
            <li class="GYH-nav-item">
                <a href="/search_tickets.jsp" class="GYH-nav-link">机票</a>
                <div class="GYH-dropdown">
                    <a href="/flight/domestic" class="GYH-dropdown-item">国内机票</a>
                    <a href="/flight/international" class="GYH-dropdown-item">国际机票</a>
                </div>
            </li>
            <li class="GYH-nav-item">
                <a href="/train.jsp" class="GYH-nav-link">火车票</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/car" class="GYH-nav-link">汽车船票</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/scenicjd.jsp" class="GYH-nav-link">景点</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/local" class="GYH-nav-link">周边团购</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/domestic" class="GYH-nav-link">境内游</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/international" class="GYH-nav-link">出境游</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/post" class="GYH-nav-link">邮轮</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/visa" class="GYH-nav-link">签证</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/strategy.jsp" class="GYH-nav-link">攻略</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/corporate" class="GYH-nav-link">企业商旅</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/corporate" class="GYH-nav-link">亮丽内蒙古</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/corporate" class="GYH-nav-link">更多</a>
            </li>
        </ul>
    </div>
</div>

<div class="main-content">
    <c:forEach items="${getjd}" var="getjd">
    <div class="breadcrumb">
        <a href="#">首页</a> >
        <a href="jd-index.jsp">酒店</a> >
        <span class="pp">${getjd.brand}</span>
        <span class="mz">${getjd.addressname}</span>
    </div>

    <div class="date-picker">
        <div class="date-header">
            <div class="date-label">入住</div>
            <div class="date-label">退房</div>
        </div>
        <div class="date-container">
            <div class="date-block" id="checkInBlock">
                <div class="date-value"></div>
                <div class="week-value"></div>
            </div>
            <div class="nights">1晚</div>
            <div class="date-block" id="checkOutBlock">
                <div class="date-value"></div>
                <div class="week-value"></div>
            </div>
        </div>
    </div>

    <div class="hotel-info">
        <div class="hotel-title">
            <h1>${getjd.addressname}
                <span class="comfort-tag">舒适</span>
                <span class="favorite-btn">☆</span>
            </h1>
            <div class="hotel-address">
                    ${getjd.addressname}
                <a href="#" class="map-link">在地图上显示 ></a>
            </div>
        </div>


            <div class="image-grid">
                <div class="main-image">
                    <img src="/AppData/${getjd.one}" alt="房间">
                    <div class="score">${getjd.score}<span class="pingjia">${getjd.evaluation}</span></div>
                </div>
                <div class="sub-images">
                    <div class="sub-image">
                        <img src="/AppData/${getjd.two}" alt="酒店外观1">
                    </div>
                    <div class="sub-image">
                        <img src="/AppData/${getjd.three}" alt="酒店外观2">
                    </div>
                    <div class="sub-image">
                        <img src="/AppData/${getjd.four}" alt="1">
                    </div>
                    <div class="sub-image">
                        <img src="/AppData/${getjd.five}" alt="餐厅">
                        <div class="view-all">查看所有照片</div>
                    </div>
                </div>
            </div>
        <span id="yc">${getjd.price}</span><span id="ws"></span>


        <div class="facilities">
            <div class="facility-item">
                <i class="facility-icon">P</i>
                <span>停车场</span>
            </div>
            <div class="facility-item">
                <span>24小时前台</span>
                <i class="facility-icon">⏰</i>
            </div>
            <div class="facility-item">
                <i class="facility-icon">🛄</i>
                <span>行李寄存</span>
            </div>
            <div class="facility-item">
                <i class="facility-icon">🍽️</i>
                <span>餐厅</span>
            </div>
            <div class="facility-item">
                <i class="facility-icon">🚗</i>
                <span>叫车服务</span>
            </div>
            <div class="facility-item">
                <i class="facility-icon">🚌</i>
                <span>送餐服务</span>
            </div>
        </div>
        <div class="djyd" ><a class="yd" href="javascript:void(0)">点击预订</a></div>
        <div class="djyd" ><a class="yd" href="/HotelReviews.jsp">点击评论</a></div>
    </div>
    </c:forEach>>
</div>

<div id="datePickerDialog">
    <div class="calendar-header">
        <button class="prev-month">〈</button>
        <div class="month-display">
            <span></span>
            <span></span>
        </div>
        <button class="next-month">〉</button>
    </div>
    <div class="calendar-container">
        <div class="weekdays">
            <span class="weekend">日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span class="weekend">六</span>
        </div>
        <div id="datePickerWrapper"></div>
    </div>
    <div class="calendar-footer">
        <div class="selected-dates"></div>
        <div class="hint">入住和退房日期以酒店当地时间为准。</div>
    </div>

</div>
<div class="service-highlights">
    <div class="highlight-item">
        <i class="icon-price"></i>
        <span>价格公正，安心购买</span>
    </div>
    <div class="highlight-item">
        <i class="icon-quality"></i>
        <span>品质保证，放心出行</span>
    </div>
    <div class="highlight-item">
        <i class="icon-service"></i>
        <span>产品丰富，一站式服务</span>
    </div>
    <div class="highlight-item">
        <i class="icon-support"></i>
        <span>专业顾问，24小时客服</span>
    </div>
</div>
<!-- Footer Navigation -->
<footer class="site-footer">
    <div class="footer-content">
        <!-- Customer Service Section -->
        <div class="footer-section">
            <h3>消费者服务</h3>
            <p>同程投诉受理电话：95711</p>
            <p>同程投诉受理邮箱：tcfwfxbz@ly.com</p>
        </div>

        <!-- About Section -->
        <div class="footer-section">
            <h3>关于同程</h3>
            <ul>
                <li><a href="/about" class="footer-link">同程简介</a></li>
                <li><a href="/sites" class="footer-link">可信网站</a></li>
                <li><a href="/sitemap" class="footer-link">网站地图</a></li>
                <li><a href="/terms" class="footer-link">用户协议与隐私条款</a></li>
            </ul>
        </div>

        <!-- Partnership Section -->
        <div class="footer-section">
            <h3>加盟合作</h3>
            <ul>
                <li><a href="/join" class="footer-link">合作加盟</a></li>
                <li><a href="/business" class="footer-link">商旅合作</a></li>
                <li><a href="/insurance" class="footer-link">旅游保险</a></li>
                <li><a href="/store" class="footer-link">门店合作</a></li>
            </ul>
        </div>


        <div class="footer-section">
            <h3>联系我们</h3>
            <ul>
                <li><a href="/join" class="footer-link">联系我们</a></li>
                <li><a href="/business" class="footer-link">投诉建议</a></li>
                <li><a href="/insurance" class="footer-link">诚聘英才</a></li>
                <li><a href="/store" class="footer-link">廉洁举报平台</a></li>
            </ul>
        </div>

        <!-- Mobile App Section -->
        <div class="footer-section" id="footer-section">
            <h3>同程旅行app</h3>
            <div class="qr-code">
                <img src="img/img.png" alt="扫描下载APP">
                <p>手机预订更优惠</p>
            </div>
        </div>
    </div>

    <!-- Popular Links -->
    <div class="popular-links">
        <div class="links-section">
            <span>热点推荐：</span>
            <a href="/disneyland" class="footer-link">迪斯尼旅游</a>
            <a href="/thailand" class="footer-link">泰国旅游</a>
            <a href="/japan" class="footer-link">日本旅游</a>
            <!-- Add more links as needed -->
        </div>
    </div>

    <div id="foot-bottom">
        <p>Copyright © 2002-2024  版权所有  <a href="#">同程网络科技股份有限公司</a></p>
        <p><a href="#">经营许可证编号：合字B2-20180016 </a>    <a href="#">备案序号：苏ICP备09033604号</a>  <a href="#"><img src="static/img/微信图片编辑_20241216151627.jpg"></img>苏公网安备32059002001003号 </a>   <a href="#">旅行社业务许可证：L-JS-CJ00070</a>  </p>
        <p><a href="#">旅游网站诚信建设承诺书 </a>    <a href="#">旅游网站守法诚信责任状 </a>   <span>违规失信举报热线：4007-777-777转9</span></p>
        <p>国家文旅部全国旅游投诉热线：拨打12345，或登录全国旅游网络投诉举报平台</p>
        <p>网站网违法和不良信息举报 邮箱：jcj@ly.com</p>
        <p><img src="img/img_1.png"></p>

    </div>
</footer>

<script>

    $(function () {
        let startDate = null;
        let endDate = null;
        const MAX_NIGHTS = 30;
        const MS_PER_DAY = 24 * 60 * 60 * 1000;

        // 日期格式化函数
        function formatDate(date, includeYear = false) {
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const week = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()];

            if (includeYear) {
                return year + '年' + month + '月' + day + '日 周' + week;
            }
            return {
                date: month + '月' + day + '日',
                week: '周' + week,
                fullDate: month + '月' + day + '日 周' + week
            };
        }
        $(".yd").click(function (){
            let ws = $("#ws").text()
            let yc = $("#yc").text()
            let name=$(".mz").html()
            let brand=$(".pp").html()
            window.location.href="jiaofei.jsp?price="+yc+"&time="+ws+"&name="+name+"&brand="+brand;
        })

        // 计算入住晚数
        function getNightCount(start, end) {
            return Math.round((end - start) / MS_PER_DAY);
        }

        // 更新日期显示
        function updateDateDisplay(checkIn, checkOut) {
            const checkInDate = formatDate(checkIn);
            const checkOutDate = formatDate(checkOut);
            const nights = getNightCount(checkIn, checkOut);

            $("#checkInBlock .date-value").text(checkInDate.date);
            $("#checkInBlock .week-value").text(checkInDate.week);
            $("#checkOutBlock .date-value").text(checkOutDate.date);
            $("#checkOutBlock .week-value").text(checkOutDate.week);
            $(".nights").text(nights + "晚");
            $("#ws").text(nights);

            // 更新底部文本
            $(".selected-dates").text(
                formatDate(checkIn, true) + " - " + formatDate(checkOut, true) + "，" + nights + "晚"
            );
        }

        // 配置日期选择器
        $("#datePickerWrapper").datepicker({
            numberOfMonths: 2,
            minDate: 0,
            maxDate: "+1Y",
            dateFormat: "yy-mm-dd",
            showOtherMonths: true,
            selectOtherMonths: true,
            beforeShowDay: function (date) {
                const time = date.getTime();
                const day = date.getDay();
                let classes = (day === 0 || day === 6) ? 'weekend-day' : '';

                if (startDate && !endDate) {
                    const nights = getNightCount(startDate, date);
                    if (nights > MAX_NIGHTS) {
                        return [false, 'disabled', '最多可选择' + MAX_NIGHTS + '晚'];
                    }
                    if (date < startDate) {
                        return [false, 'disabled'];
                    }
                    if (time === startDate.getTime()) {
                        classes += ' selected-start';
                    }
                }

                if (startDate && endDate) {
                    if (time === startDate.getTime()) {
                        classes += ' selected-start';
                    } else if (time === endDate.getTime()) {
                        classes += ' selected-end';
                    } else if (time > startDate.getTime() && time < endDate.getTime()) {
                        classes += ' selected-range';
                    }
                }

                return [true, classes];
            },
            onSelect: function (dateText) {
                const selectedDate = $(this).datepicker('getDate');

                if (!startDate || (startDate && endDate) || selectedDate < startDate) {
                    // 选择开始日期
                    startDate = selectedDate;
                    endDate = null;
                    $(this).datepicker('refresh');

                    // 更新底部提示文本
                    $(".selected-dates").text(
                        formatDate(startDate, true) + " - 请选择退房日期（最多" + MAX_NIGHTS + "晚）"
                    );
                } else {
                    // 选择结束日期
                    const nights = getNightCount(startDate, selectedDate);

                    if (nights > MAX_NIGHTS) {
                        alert('最多可选择' + MAX_NIGHTS + '晚');
                        return;
                    }

                    endDate = selectedDate;
                    updateDateDisplay(startDate, endDate);
                    closeDatePicker();
                }
            }
        });

        // 显示日期选择器
        function showDatePicker() {
            $('<div class="dialog-overlay"></div>')
                .appendTo('body')
                .click(closeDatePicker);
            $("#datePickerDialog").fadeIn(200);

            const currentDate = $("#datePickerWrapper").datepicker("getDate");
            updateMonthDisplay(currentDate || new Date());
        }

        // 关闭日期选择器
        function closeDatePicker() {
            $("#datePickerDialog").fadeOut(200);
            $(".dialog-overlay").fadeOut(200, function () {
                $(this).remove();
            });
        }

        // 更新月份显示
        function updateMonthDisplay(date) {
            const currentMonth = new Date(date);
            const nextMonth = new Date(date);
            nextMonth.setMonth(nextMonth.getMonth() + 1);

            $(".month-display span:first").text(
                currentMonth.getFullYear() + "年 " + (currentMonth.getMonth() + 1) + "月"
            );
            $(".month-display span:last").text(
                nextMonth.getFullYear() + "年 " + (nextMonth.getMonth() + 1) + "月"
            );
        }

        // 月份切换按钮事件
        $(".prev-month").click(function () {
            const current = $("#datePickerWrapper").datepicker("getDate");
            current.setMonth(current.getMonth() - 1);
            $("#datePickerWrapper").datepicker("setDate", current);
            updateMonthDisplay(current);
        });

        $(".next-month").click(function () {
            const current = $("#datePickerWrapper").datepicker("getDate");
            current.setMonth(current.getMonth() + 1);
            $("#datePickerWrapper").datepicker("setDate", current);
            updateMonthDisplay(current);
        });

        // 点击日期块显示日期选择器
        $(".date-block").click(showDatePicker);

        // ESC键关闭日期选择器
        $(document).keydown(function (e) {
            if (e.keyCode === 27) { // ESC
                closeDatePicker();
            }
        });

        // 收藏按钮点击事件
        $(".favorite-btn").click(function () {
            $(this).text($(this).text() === '☆' ? '★' : '☆');
        });

        // 初始化默认日期（今天和明天）
        const today = new Date();
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1);

        startDate = today;
        endDate = tomorrow;
        updateDateDisplay(today, tomorrow);
        $("#datePickerWrapper").datepicker("setDate", today);
    });
</script>

</script>
</body>
</html>